<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>12_指令_内置指令</title>
	<style>
		[v-cloak]{
			display: none;
		}
	</style>
</head>
<body>
<!--
常用内置指令
  v:text : 更新元素的 textContent
  v-html : 更新元素的 innerHTML
  v-if : 如果为true, 当前标签才会输出到页面
  v-else: 如果为false, 当前标签才会输出到页面
  v-show : 通过控制display样式来控制显示/隐藏
  v-for : 遍历数组/对象
  v-on : 绑定事件监听, 一般简写为@
  v-bind : 强制绑定解析表达式, 可以省略v-bind
  v-model : 双向数据绑定
  ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
  v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
-->

<div id="demo">
	<p ref="content">I LOVE YOU</p>
	<button @click="hint">click me</button>
	<p v-cloak>v-cloak</p>
</div>
<script src="../js/vue.js"></script>
<script>
	alert("--------")
	const vm = new Vue({
		el: '#demo',
		data: {

		},
		methods:{
           hint(){
           	alert(this.$refs.content.textContent);
           }
		}
	})
</script>
</body>
</html>